<template>
  <a-card :bordered="false">
    <a-tabs default-active-key="1" style="margin-top: -20px" @change="tabChange">
      <a-tab-pane key="1" tab="列表">
            <!-- 查询区域 -->
            <div class="table-page-search-wrapper">
              <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">

                  <a-col :md="6" :sm="8">
                    <a-form-item label="任务名称">
                      <a-input placeholder="请输入任务名称" v-model="queryParam.taskName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <a-form-item label="摘要">
                      <a-input placeholder="请输入摘要" v-model="queryParam.summary"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8" >
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                      <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                      <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                    </span>
                  </a-col>

                </a-row>
              </a-form>
            </div>

            <!-- table区域-begin -->
            <div>
              <div v-if="selectedRowKeys.length > 0" class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
                <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
                <a style="margin-left: 24px" @click="onClearSelected">清空</a>
              </div>

              <a-table
                ref="table"
                size="middle"
                bordered
                rowKey="id"
                :scroll="{ x: 1500, y: 600 }"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                :loading="loading"
                @change="handleTableChange">

                <!-- 字符串超长截取省略号显示-->
                <span slot="summary" slot-scope="text,record"><a-tooltip><template slot="title">{{customRender(text)}}</template>{{customRender(text)}}</a-tooltip></span>
              </a-table>
            </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="统计图">
        <div style="width: 100%;position: relative">
          <a-row>
            <a-col>
              <a-button type="primary" @click="initChart('sql_workflow_dep_speed')">按部门效率</a-button>
              &nbsp;
              <a-button class="tp-button" type="primary" @click="initChart('sql_workflow_dep_num')">按部门业务数</a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col>
              <div id="chart" style="width: 100%;height:500px;"></div>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>





    </a-tabs>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <model-modal ref="modalForm" @ok="modalFormOk"></model-modal>
    <history-list ref="modalList" @ok="modalFormOk"></history-list>
    <!--<model-edit-modal ref="modalEditForm"></model-edit-modal>-->
  </a-card>
</template>

<script>
  import ModelModal from './modules/ModelModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction,deleteAction,putAction,postAction} from '@/api/manage'
  import HistoryList from './modules/HistoryList'
  import moment from "moment"
  export default {
    name: "TodoList",
    mixins:[JeecgListMixin],
    components: {
      ModelModal,
      HistoryList
      /*ModelEditModal*/
    },
    data () {
      return {
        description: '任务耗时统计',
        // 表头
        columns: [
          {
            title: '业务摘要',
            align:"left",
            width:300,
            dataIndex: 'summary',
            scopedSlots: { customRender: 'summary' },
            ellipsis:true,
          },
          {
            title: '流程实例名',
            width:200,
            align:"center",
            dataIndex: 'processDefinitionName'
          },
		      {
            title: '已办任务名称',
            width:200,
            align:"center",
            dataIndex: 'name'
           },   
          {
            title: '审批结果',
            width:200,
            align:"center",
            dataIndex: 'comment'
          },
          {
            title: '耗时',
            align:"center",
            sorter: true,
            width:150,
            dataIndex: 'duration',
            customRender:function (t,r,index) {
              const duration = r.duration
              var text = ''
              if (duration != null) {
                // text = (duration / 1000 / 60).toFixed(2)
                // return text;
                var text = "";
                var days = Math.floor(duration / (24 * 60 * 60 * 1000));
                if(days != 0){
                  text += days + "天";
                }
                //计算小时数
                var hourLevel = duration % (24 * 60 * 60 * 1000);
                var hours = Math.floor(hourLevel / (60 * 60 * 1000))
                if(hours != 0){
                  text += hours + "小时";
                }
                //计算分钟数
                var minutesLevel = hourLevel % (60 * 60 * 1000);
                var minutes = Math.floor(minutesLevel / (60 * 1000));
                if(minutes != 0){
                  text += minutes + "分";
                }
                //计算秒数
                var seconds = Math.round((minutesLevel % (60 * 1000)) / 1000);
                text += seconds + "秒";

                return text;
              }
              return text;
            }
          },
          {
            title: '开始时间',
            align:"center",
            dataIndex: 'startTime',
            width:200,
            customRender: (text, row, index) => {
              if (text != ''){
                return moment(text).format("YYYY-MM-DD HH:mm");
              }
            },
            sorter: true
          },
          {
            title: '结束时间',
            align:"center",
            dataIndex: 'endTime',
            width:200,
            customRender: (text, row, index) => {
              if (text != ''){
                return moment(text).format("YYYY-MM-DD HH:mm");
              }
            },
            sorter: true
          },
          {
            title: '当前任务名称',
            align:"center",
            dataIndex: 'currentTaskName',
            width:230,
           },
        ],
		url: {
          list: "/act/taskinst/dones",
          queryDataByCode:'/tpsoft/tpDataSource/queryDataByCode'
       },
        addModel:true,
        modelSrc:'',
        option : {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },

          xAxis: [
            {
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: ''
              },

            }
          ],
          series: [
            {
              name:'',
              type: 'bar',
              barWidth: '60%',
              data: []
            }
          ],

        },

    }
  },
    created(){

    },
    mounted(){
      // this.initChart('sql_workflow_dep_speed')
    },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
    methods: {
      tabChange(key){
        if(key=='2'){
          this.initChart('sql_workflow_dep_speed')
        }
      },
      initChart(type){
        this.option.xAxis[0].data=[]
        this.option.series[0].data=[]
        this.option.series[0].name=''
        postAction(this.url.queryDataByCode+'?code='+type,{code:type}).then(res=>{
          if(res.success){
            let Chart = this.$echarts.init(document.getElementById('chart'));
            for (let i = 0; i < res.result.length; i++) {
              if(type=='sql_workflow_dep_speed'){
                this.option.series[0].name='平均用时(分钟)'
                this.option.yAxis[0].axisLabel.formatter='{value} 分钟'
                this.option.series[0].data.push(res.result[i].speed)
              }
              if(type=='sql_workflow_dep_num'){
                this.option.series[0].name='业务数'
                this.option.yAxis[0].axisLabel.formatter='{value} 笔业务'
                this.option.series[0].data.push(res.result[i].num)
              }
              this.option.xAxis[0].data.push(res.result[i].depart_name)
            }

            Chart.setOption(this.option);
          }
        })
      },
      customRender(r){
        let summary = r;
        var m = summary.match( new RegExp('title":"'+'(.*?)'+'"') );
        return m ? m[ 1 ] : '';
      },
      Ellipsis(text){
        if(text.length > 20){
          return text.substring(0,20)+"..."
        }else {
          return text
        }
      },
      showHistory(row){
        this.$refs.modalList.init(row.businessKey);
        this.$refs.modalList.title = "审批历史";
        this.$refs.modalList.disableSubmit = false;
      },
      // toDetail(record){
      //   this.$router.push(record.url);
      // },

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>